/* 头部区域样式 */
.header-section {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 0;
    padding:2px 10px;
    height: 60px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: none;
  
    .logo-area {
      display: flex;
      align-items: center;
      padding: 0 15px;
      max-width: 15%;
  
      img {
        height: 30px;
        filter: brightness(1.1) contrast(1.1) saturate(1.1);
        transform: scale(1.0);
  
        &:hover {
          filter: brightness(1.2) contrast(2.2) saturate(1.2);
          transform: scale(1.1);
          transition: all 0.3s ease;
  
        }
      }
    }
  
    .title-area {
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1000px;
  
      h1 {
        transition: all 0.3s ease;
        margin: 0;
        font-size: 2em;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(90deg, #fff, #fff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:
          1px 1px 2px rgba(0, 0, 0, 0.3),
          -1px -1px 1px rgba(255, 255, 255, 0.5);
        text-align: center;
        cursor: pointer;
        transform-style: preserve-3d;
        transform-origin: center;
  
        &.title-animate {
          animation: titleAnimation 3s cubic-bezier(0.4, 0, 0.2, 1);
        }
  
        &:hover {
          font-size: 2.1em;
          font-weight: bold;
          color: white;
          -webkit-text-fill-color: transparent;
          transform: scale(1.03);
        }
  
        &:active {
          transform: scale(1.01);
          text-shadow:
            1px 1px 2px rgba(0, 0, 0, 0.3),
            1PX 1PX 1PX rgb(1, 1, 1, 0.5),
            -1px -1px 1px rgba(255, 255, 255, 0.5);
        }
      }
    }
  
    .status-area {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 4px;
      position: relative;
      z-index: 0;
  
      .status-content {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        // padding-right: 60px;
        height: 100%;
        width: 100%;
  
        .datetime {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #fff;
  
          span {
            font-size: 14px;
            line-height: 1.2;
          }
  
          .time {
            margin-top: 4px;
            font-weight: bold;
          }
        }
  
        .user-info {}
  
        .user-info {
          width: 10%;
          padding: 0;
          margin: 0;
          cursor: pointer;
          position: absolute;
          top: 0;
          display: flex;
          align-items: center;
          right: 50px;
          text-align: right;
  
          .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
          }
  
          span {
            // color: #fff;
            font-size: 14px;
          }
  
          .network {
            right: 0px;
            top: 1em;
            .el-icon {
              /* 图标基础样式 */
              font-size: 2em;
              cursor: pointer;
              transition: all 0.3s ease;
              /* 添加过渡效果，使状态变化更平滑 */
              // right: 0px;
  
              /* 在线状态样式：绿色带发光效果 */
              &.online {
                // color: #67C23A;
                color: #3a43c2;
                /* 使用Element Plus的成功色 */
                text-shadow: 0 0 10px rgba(103, 194, 58, 0.5);
                /* 添加发光效果 */
                filter: brightness(1.1) contrast(1.1) saturate(1.1);
                /* 增强显示效果 */
              }
  
              /* 离线状态样式：灰色 */
              &.offline {
                color: #3f3e3e;
                filter: brightness(0.01) contrast(0.01) saturate(0.01);
                /* 降低显示效果 */
                text-shadow: 0 0 10px rgba(245, 108, 108, 0.5);
              }
  
              /* 鼠标悬停效果 */
              &:hover {
                transform: scale(1.1);
                /* 鼠标悬停时放大 */
              }
            }
          }
        }
  
      }
  
  
  
      .version {
        text-align: right;
        font-size: 10px;
        opacity: 0.6;
        margin-top: 4px;
        padding-top: 10px;
      }
  
    }
  }
  
  /* 定义动画序列 */
  @keyframes titleAnimation {
  
    /* 0-1秒：缩小 */
    0% {
      transform: scale(1) rotateY(0deg);
    }
  
    33% {
      transform: scale(0.5) rotateY(0deg);
    }
  
    /* 1-2秒：旋转 */
    66% {
      transform: scale(0.5) rotateY(360deg);
    }
  
    /* 2-3秒：放大 */
    100% {
      transform: scale(1) rotateY(360deg);
    }
  }
  